<template>
<!--  心理测试页-->
  <div id="body">
    <CommonHeader></CommonHeader>
    <div id="bodyheader"> <!--  放标题-->
      <div id="headerinside">
        抑郁自评量表
      </div>
    </div>
    <div id="bodymain">   <!--  放题目-->
      <el-form class="form" :model="result">
        <el-form-item class="question" v-for="(eachQuestion,index) in QuestionList"
                      :label="'Q' + (index+1) + ' ' + eachQuestion.problem" :key="eachQuestion">
          <el-radio-group v-model="result[index]" class="option">
            <el-radio :label="eachQuestion.weightA" class="one">{{ eachQuestion.optionA }}</el-radio>
            <el-radio :label="eachQuestion.weightB" class="two">{{ eachQuestion.optionB }}</el-radio> <br>
            <el-radio :label="eachQuestion.weightC" class="three">{{ eachQuestion.optionC }}</el-radio>
            <el-radio :label="eachQuestion.weightD" class="four">{{ eachQuestion.optionD }}</el-radio>
          </el-radio-group>
        </el-form-item>

        <div>
          <el-form-item>
            <!--            <el-button class="but" type="primary" @click="getResult('DietQuestion')">提交</el-button>-->
            <el-button class="but" type="primary" round @click="getResult('Self_Rating_Depression_Scale')">提交</el-button>
<!--            <div class="info">-->
<!--              <p>本自测题依据被广泛使用的中国常模结果中的SDS标准</p>-->
<!--            </div>-->
            <p class="info">本自测题依据被广泛使用的中国常模结果中的SDS标准</p>
          </el-form-item>
        </div>

      </el-form>
    </div>

  </div>
</template>

<script>
import CommonHeader from "../../components/CommonHeader";
import {getQuestionListApi, getResultApi} from "../../api/getData";
import {ElMessage} from 'element-plus'
export default {
  name: "PhysiologicalTest",
  components: {CommonHeader},
  data() {
    return {
      result: [], //用来存选项结果
      QuestionList: {
        type: Array
      },
      totalScore: 0
    }
  },
  methods: {
    async getQuestionList(Self_Rating_Depression_Scale) {
      const result = await getQuestionListApi(Self_Rating_Depression_Scale);
      if (result.data.code === 0) {
        this.QuestionList = result.data.data;
        // console.log(this.QuestionList);调试用
      } else {
        // console.log('error')
        this.$alert('数据库连接断开！请检查网络！', 'ERROR', {
          confirmButtonText: '确定',
        });
      }
    },
    async getResult(Self_Rating_Depression_Scale) {
      try {
        if (this.result.length === this.QuestionList.length) {
          for (let i = 0; i < this.result.length; i++) {
            this.totalScore = this.totalScore + this.result[i];
          }

          if (this.totalScore < 52) {
            this.totalScore = 21;
          }else if (this.totalScore<63){
            this.totalScore = 22;
          }else if (this.totalScore<73){
            this.totalScore = 23;
          }else if (this.totalScore>73){
            this.totalScore = 24;
          }
          // console.log(this.result);调试用
          // console.log(this.totalScore);
          const requestResult = await getResultApi(Self_Rating_Depression_Scale, this.totalScore);
          this.totalScore = 0;
          const result = requestResult.data.data.result;
          ElMessage.success({
            message: '提交成功！',
            type: 'success'
          });
          this.$alert(result, '测试结果', {
            confirmButtonText: '确定',
          });
        } else {
          ElMessage.warning({
            message: '提交失败！',
            type: 'warning'
          });
          this.$alert('问卷未填写完毕，不可提交！', '测试结果', {
            confirmButtonText: '确定',
          });
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  mounted() {
    this.getQuestionList('Self_Rating_Depression_Scale');
  },
}
</script>

<style scoped>
#bodyheader{
  margin-top: 4%;
  margin-left: 13%;
  margin-right: 13%;
  font-family: 华文楷体;
  font-weight: bold;
  font-size: 30px;
  background: white;
  color: orange;
  padding-top: 16px;
  padding-bottom: 10px;
}
#headerinside
{
  /*margin-left: 35%;*/
  text-align: center;
}
#bodymain{
  margin-top: 1%;
  margin-left: 13%;
  margin-right: 13%;
  height: 83%;
  background-color: white;
}
#body{
  position:absolute;
  width:100%;
  height: 100%;
  background-color: whitesmoke;
}
.question {
  display: block;
  margin: 1px 80px;
  padding: 30px;
}
.one,
.two,
.three,
.four {
  width: 40%;
  padding: 10px;
  margin: 3px;
}
.option,
.question {
  display: block;
}
.form {
  box-shadow: 10px 10px 15px gainsboro;
}
.but {
  font-size: 15px;
  color: white;
  /*background-color: orange;*/
  margin-left: 70%;
  margin-right: 13%;
  margin-bottom: 20px;
  padding: 10px;
  border: 15px;

}
.info {
  width: 500px;
  height: 50px;
  /*border: 3px solid red;*/
  color: lightgray;
  float: right;
  vertical-align: text-top;
}
</style>